<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./index.js"></script>
    <script type="text/javascript">
        const proxyUser1 = shallowReactive({
                name: '小明',
                car: {
                    color: 'red'
                }
            })
            // //拦截到了读取和修改
            // proxyUser1.name += '小红'
            //     //拦截到了读取数据 和   修改数据
            // proxyUser1.car += 'green'
            //拦截到了读取数据 但没有拦截到修改

        // proxyUser1.car.color + '=='
        //拦截到了删除数据
        // delete proxyUser1.name
        // //只拦截到读取数据 但是拦截不到删除数据 因为是浅响应 
        // delete proxyUser1.car.color

        const proxyUser2 = reactive({
                name: '小明',
                car: {
                    color: 'red'
                }
            })
            // //拦截到了读取和修改
            // proxyUser2.name += '小红'
            //     //拦截到了读取数据 和   修改数据
            // proxyUser2.car += 'green'
            //拦截到了读取数据 也拦截到了修改 深劫持

        // proxyUser2.car.color = '=='
        //拦截到了删除数据
        // delete proxyUser2.name
        //     //只拦截到读取数据 但是拦截不到删除数据 因为是深响应 
        // delete proxyUser2.car.color

        //==============================================
        //测试shallowReadonly与readonly
        const proxyUser3 = shallowReadonly({
                name: '小明',
                cars: ['奔驰C200L', '宝马330Lim', '捷豹']
            })
            //显示只能读取数据 不能修改
            // proxyUser3.name = '明明'
            //可以读取与拦截 打印 不能修改
            // console.log(proxyUser3.name);
            //不能删除
            // delete proxyUser3.cars
            //只读的 但是拦截不了深度的修改  可以修改
            // proxyUser3.cars[3] = '玛莎拉蒂'
            //拦截到了读取 ，可以删除
            // delete proxyUser3.cars[0]

        const proxyUser4 = readonly({
                name: '小明',
                cars: ['奔驰C200L', '宝马330Lim', '捷豹']
            })
            //只能读取不能修改
            // proxyUser4.name = '明明'
            //拦截到了读取
            // console.log(proxyUser4.name); 
            //拦截到了读取   
            // console.log(proxyUser4.cars[0]);
            //拦截到了读取 不能修改
            // proxyUser4.cars[0] = '大众'
            //只能读取不能删除 深层次的数据不能修改 深层次的数据不能删除
            // delete proxyUser4.cars[2]


        const ref1 = shallowRef({
                name: '小明',
                cars: ['奔驰C200L', '宝马330Lim', '捷豹'],
                dog: {
                    name: '团团',
                    age: "1"
                }
            })
            //劫持到了读取数据  浅的劫持
            // console.log(ref1.value);
            // 劫持到了修改数据，准备更新页面 ==
            // ref1.value = '=='
            //只劫持到了浅的数据 深层次的劫持不到修改数据
            // ref1.value.cars[0] = '理想'


        const ref2 = ref({
                name: '小明',
                cars: ['奔驰C200L', '宝马330Lim', '捷豹'],
                dog: {
                    name: '团团',
                    age: "1"
                }
            })
            //          劫持到了读取数据
            // 拦截了读取数据 cars Proxy {0: "奔驰C200L", 1: "宝马330Lim", 2: "捷豹"}
            //  拦截了修改数据或者是添加属性 0 理想
            //         ref2.value.cars[0] = '理想'
            //             劫持到了读取数据
            //  拦截了修改数据或者是添加属性 cars ==
            // ref2.value.cars = '=='
        console.log(isRef(ref({})));
    </script>
</body>

</html>